<template>
  <!--冒号的作用：类似于v-bind属性绑定-->
  <a-list
    item-layout="horizontal"
    :data-source="props.userList"
    :grid="{ gutter: 35, column: 5 }"
  >
    <template #renderItem="{ item }">
      <a-card class="user-card" hoverable style="width: 240px" size="small">
        <template #cover>
          <img class="user-avatar" alt="" :src="item.userAvatar" />
        </template>
        <a-card-meta :title="item.userName">
          <template #description>{{ item.userProfile }}</template>
        </a-card-meta>
      </a-card>
    </template>
  </a-list>
</template>

<script setup lang="ts">
import { withDefaults, defineProps } from "vue";

//定义类型，ts语法
interface Props {
  userList: never[];
}

//接收来自父组件【IndexPage.vue中由<userList :userList = userList>传入的userList数据】
const props = withDefaults(defineProps<Props>(), {
  userList: () => [],
});
</script>

<style scoped>
.user-card {
  height: 300px; /* 统一卡片高度 */
}

.user-avatar {
  height: 220px; /* 统一头像高度 */
}
</style>
